<template>
  <div class="about">
    <nav-header title="我的书架" left-text="返回" @click-left="onClickLeft"></nav-header>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="正在看" name="1">
        <ul>
          <li v-for="(item, index) in $store.state.runRead" :key="index">
            {{ item }}
            <div>
              <span style="color: red" @click="finish(index)">标记已读</span> |
              <span style="color: #ccc" @click="del(index,'正在看')">删除此书</span>
            </div>
          </li>
        </ul>
      </van-collapse-item>
      <van-collapse-item title="已完结" name="2">
        <ul>
          <li v-for="(item, index) in $store.state.finish" :key="index">
            {{ item }}
            <div>
              <span style="color: red" @click="run(index)">再看一遍</span> |
              <span style="color: #ccc" @click="del(index,'已完结')">删除此书</span>
            </div>
          </li>
        </ul>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
import navHeader from "../components/navHeader.vue";
export default {
  components:{navHeader},
  data() {
    return {
      activeNames: [],
    };
  },
  methods: {
    finish(i) {
      this.$store.commit("addFinish", i);
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    run(i) {
      this.$store.commit("addRun", i);
    },
    del(i,val){ // 删除触发的方法
      this.$store.commit('delect',{index:i,type:val});
    }
  },
};
</script>
<style lang="scss">
.van-cell--clickable {
  background: red;
  color: #fff;
}
.van-collapse {
  margin-top: 20px;
}
.van-collapse-item__content {
  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    font-size: 12px;
    padding: 0 18px;
  }
}
.search {
  display: flex;
  // background: #ccc;
  height: 80px;
  align-items: center;
  input {
    flex: 1;
    border: none;
    background: #f0f0f0;
    height: 40px;
    padding: 0 10px;
  }
  span {
    width: 60px;
    // height: 80%;
    text-align: center;
    background: #7277e0;
    color: #fff;
    padding: 8px 0;
  }
}
.exent {
  height: 45px;
  background: #7277e0;
  color: #fff;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  .left {
    font-size: 14px;
    font-weight: 900;
  }
}
.history {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  li {
    padding: 6px 0;
    width: 60px;
    border: 1px solid #ccc;
    border-radius: 3px;
    text-align: center;
    font-size: 12px;
    margin-left: 10px;
  }
}
</style>
